<template>
  <view class="home">
    <cl-nav-bar leftIcon=""></cl-nav-bar>
    <view class="search" @click="_toPage('/pages/search/index')">
      <uni-search-bar
        placeholder="请输入关键字查询"
        clearButton="none"
        cancelButton="none"
        style="pointer-events: none"
      />
    </view>
    <swiper class="swiper" circular>
      <swiper-item v-for="item in bannerList" :key="item.id">
        <image
          class="swiper_image"
          :src="item.url"
          mode="aspectFill"
          @click="handleBannerToPage(item)"
        />
      </swiper-item>
    </swiper>
  </view>
  <view class="card">
    <text class="card_title">热门分类</text>
    <view class="category">
      <view
        v-for="(item, idx) in categoryList"
        :key="idx"
        class="category_item"
        @click="toClassifyPage(item)"
      >
        <image
          class="category_item_icon"
          :src="item.homeImgUrl"
          mode="aspectFill"
        />
        <text class="category_item_name">{{ item.name }}</text>
      </view>
    </view>
  </view>
  <view class="card">
    <text class="card_title">热销商品</text>
    <view class="goods">
      <view
        v-for="(item, idx) in goodsList"
        :key="idx"
        class="goods_item"
        @click="_toPage(`/pages/goods/detail?id=${item.id}`)"
      >
        <image
          class="goods_item_image"
          :src="item.homeImgUrl"
          mode="aspectFill"
        />
        <text class="goods_item_name exceed_omit_2">{{ item.name }}</text>
        <view class="goods_item_label">
          <text
            v-for="itm in item.labels"
            :key="itm"
            class="goods_item_label_item"
            >{{ itm }}</text
          >
        </view>
        <view class="goods_item_price">
          <text class="show">￥{{ item.showPrice }}</text>
          <text class="real">￥{{ item.actualPrice }}</text>
        </view>
        <view class="goods_item_des exceed_omit_2">{{ item.des }}</view>
      </view>
    </view>
    <view class="bottom_tip" @click="_toPage('/pages/goods/list')"
      >查看更多商品 👉</view
    >
  </view>
</template>

<script setup>
import { onMounted } from 'vue'

const bannerList = ref([])
const categoryList = ref([])
const goodsList = ref([])

const getBannerList = () => {
  uni
    .request({
      url: '/light-basic/wxBannerController/listUnTotal',
      data: { bannerFlag: 'banner' },
      method: 'GET',
      resField: 'data',
    })
    .then((res) => {
      bannerList.value = res
    })
}
const getClassifyList = () => {
  uni
    .request({
      url: '/shop/goodsClassifyController/listOpenHot',
      method: 'GET',
      resField: 'data',
      data: {
        pageSize: -1,
        pageNum: 1,
      },
    })
    .then((res) => {
      categoryList.value = res
    })
}
const getGoodsList = () => {
  uni
    .request({
      url: '/shop/goodsController/listOpenHot',
      method: 'GET',
      resField: 'data',
      data: {
        pageSize: -1,
        pageNum: 1,
        unTenant: true,
      },
    })
    .then((res) => {
      goodsList.value = res
    })
}

onMounted(() => {
  getBannerList()
  getClassifyList()
  getGoodsList()
})
const handleBannerToPage = (item) => {
  if (item.clickUrl) {
    uni.navigateTo({ url: item.clickUrl })
  }
}

const toClassifyPage = (item) => {
  uni.reLaunch({
    url: '/pages/tabbar/category/index?classifyId=' + item.id,
  })
}
</script>

<style lang="scss" scoped>
.search {
  background-color: #fff;
}
.swiper {
  width: 100%;
  height: 700rpx;
  &_image {
    width: 100%;
    height: 100%;
  }
}

.card {
  padding: 40rpx 20rpx;
  margin: 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  &_title {
    padding: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
.category {
  margin-top: 20rpx;
  column-count: 3;
  &_item {
    margin-bottom: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &_icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;
    }
    &_name {
      margin-top: 10rpx;
      font-size: 26rpx;
    }
  }
  &_item:nth-child(4),
  &_item:nth-child(5),
  &_item:nth-child(6) {
    margin-top: 40rpx;
    margin-bottom: 0;
  }
}
.goods {
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  &_item {
    border-radius: 10rpx;
    padding: 10rpx 16rpx;
    box-sizing: border-box;
    box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.2);
    width: 48%;
    margin-bottom: 40rpx;
    &_image {
      width: 100%;
      height: 300rpx;
    }
    &_name {
      font-size: 28rpx;
      font-weight: bold;
    }
    &_label {
      display: flex;
      flex-wrap: wrap;
      &_item {
        margin-top: 10rpx;
        margin-right: 10rpx;
        font-size: 24rpx;
        border-radius: 6rpx;
        background: #81a9f0;
        color: #fff;
        padding: 6rpx;
      }
    }
    &_price {
      display: flex;
      align-items: flex-end;
      margin-top: 10rpx;
      font-size: 40rpx;
      color: #ff5000;
      .real {
        margin-left: 20rpx;
        font-size: 28rpx;
        text-decoration: line-through;
      }
    }
    &_des {
      margin-top: 10rpx;
      font-size: 24rpx;
    }
  }
}

.bottom_tip {
  text-align: center;
  font-size: 24rpx;
  color: #81a9f0;
}
</style>
